<style scoped lang="scss">

</style>
<template>
    <div>
        <el-form
                :model="queryParams"
                ref="queryForm"
                :inline="true"
                v-show="showSearch"
                @submit.native.prevent>
            <el-form-item label="分类名称" prop="name">
                <el-input
                        v-model="queryParams.name"
                        placeholder="分类名称"
                        clearable
                        size="small"
                        @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            
            
            <el-form-item>
                <el-button
                        type="primary"
                        icon="el-icon-search"
                        size="mini"
                        @click="handleQuery"
                >搜索
                </el-button
                >
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8" style="margin-top: 10px;margin-bottom: 10px;">
            <el-col :span="1.5">
                <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="()=>triggerClassModify()"
                >新增
                </el-button
                >
            </el-col>
        
        </el-row>
        <el-table
                ref="datalisttable"
                v-loading="loading"
                :data="dataList"
                row-key="id"
                border
                lazy
                :load="load"
                maxHeight="888px"
                :tree-props="{ children: 'children', hasChildren: 'haveNext' }"
                class="mini-table"
        >
            <el-table-column
                    type="selection">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="分类名称"
                    :show-overflow-tooltip="true"
                    width="160"
            ></el-table-column>
            
            
            <el-table-column
                    prop="orderNum"
                    label="排序"
            ></el-table-column>
            <el-table-column
                    prop="lastEditTime"
                    label="更新时间"
            >
                <template slot-scope="scope">
                    <tipcontent class="overflow1">{{ scope.row.lastEditTime}}</tipcontent>
                </template>
            </el-table-column>
            
            <el-table-column
                    prop="expendType"
                    label="分类类型"
                    :show-overflow-tooltip="true"
                    width="80"
            >
                <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.expendType&&scope.row.expendType!='0'">
                        {{getExtendTypeChinse(scope.row.expendType)}}
                    </el-tag>
                </template>
            </el-table-column>
            
            <el-table-column
                    prop="remarks"
                    label="备注"
                    :show-overflow-tooltip="true"
            ></el-table-column>
            
            
            <el-table-column
                    label="操作"
                    align="center"
                    fixed="right"
                    class-name="small-padding fixed-width"
            >
                <template slot-scope="scope">
                    <el-popover
                            placement="top-start"
                            title="操作"
                            width="300"
                            trigger="hover"
                    >
                        <div>
                            <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="()=>{
             triggerClassModify(scope.row)
            }"
                            >修改
                            </el-button
                            >
                            <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-plus"
                                    @click="()=>{
                                 triggerAddChildModify(scope.row)
                            }"
                            >添加下级
                            </el-button>
                            
                            <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-notebook-1"
                                    @click="openLog(scope.row)"
                            >变更日志
                            </el-button>
                            
                            <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-delete"
                                    @click="handleDelete(scope.row).then(isyes=>{if(isyes)$data.currentRow=scope.row;afterDialogSuccess();})"
                            >删除
                            </el-button>
                        </div>
                        <el-button slot="reference" size="mini" type="text">操作</el-button>
                    </el-popover>
                
                
                </template>
            </el-table-column>
        
        
        </el-table>
        <el-pagination
                :background="true"
                style="padding: 20px;"
                :page-size="queryParams.pageSize"
                :current-page.sync="queryParams.pageNum"
                layout="prev, pager, next"
                :total="total"
                @size-change="(pageSize)=>{$data.queryParams.pageSize=pageSize;dataList=[];getInfoList();}"
                @current-change="(pageNum)=>{$data.queryParams.pageNum=pageNum;dataList=[];getInfoList();}"
        >
        </el-pagination>
    </div>

</template>

<script >
    import mydialogplus from '@codegenarate/mydialogplus'

    import {formData, formMethod, PageData} from '@/utils/formcommon';

    import * as api from '@/apis/class.api.js';

    export default {
        name: 'classDialog',
        components: {
            tipcontent: () => import("@/components/tipcontent/index.vue")
        },
        props: {},
        data() {
            return {
                console: window.console,
                dialogVisible: true,
                api: api,
                ...formData,
                // 查询参数
                queryParams: {
                    ...PageData,
                    delState: '',
                    haveNext: true,
                    name: undefined,
                    parentId: 0,
                    typeInfo: '',
                    expendType: '',
                },
                rolesList: [],
                // 表单参数
                form: {
                    parentName: '顶级部门',
                    roleIds: [],
                },
                // 表单校验
                rules: {
                    name: [{required: true, trigger: 'blur', message: '分类名称不能为空'}],
                },

                currentRow: null,
            };
        },

        methods: {
            ...formMethod,
            afterDialogSuccess(_parentId) {
                /** 刷新具体变动的row
                 * 1.找打parentId
                 * 2.刷新行  */
                console.log('弹出框添加修改之后，afterDialogSuccess parentId', _parentId);
                console.log(this.queryParams);
                var parentId = _parentId || this.$data.currentRow && this.$data.currentRow.parentId;
                if (parentId == '0') {
                    this.currentRow = null;
                    this.getInfoList();
                    return false;
                }
                if (parentId) {
                    //刷新父类
                    this.ajaxLoadNodeData({id: parentId}).then(newData => {
                        if (this.$refs['datalisttable'] &&
                            this.$refs['datalisttable'].store &&
                            this.$refs['datalisttable'].store.states &&
                            this.$refs['datalisttable'].store.states.lazyTreeNodeMap) {
                            this.$set(this.$refs['datalisttable'].store.states.lazyTreeNodeMap, parentId, newData); // 重置一下缓存
                            //fixedbug 如果只有 newData 一个  刷新getlist()
                            if (newData && newData.length == 1) {
                                this.getInfoList();
                            }
                        }
                    });
                } else {
                    this.getInfoList();
                }


                this.currentRow = null;
            },
            ajaxLoadNodeData(row) {
                let nextParams = {
                    pageNum: 1,
                    pageSize: 100,
                    haveNext: true,
                    parentId: row.id,
                };
                // console.log("加载最新的节点数据params",nextParams)
                return this.api.getList(nextParams).then((response) => {
                    return response.data;
                });
            },
            /**
             * @decs
             * @params  type => zh
             * @return
             */
            getExtendTypeChinse(type) {
                var map = {
                    check_prices: '核价',
                };
                return map[type];
            },
            validate(options) {
                if (!options.typeInfo) {
                    this.msgError('请设置typeInfo');
                    return false;
                }
                return true;
            },
            initByDialog(options) {

                if (!this.validate(options)) {
                    return false;
                }
                this.$data.$_options = options;
                this.queryParams.typeInfo = options.typeInfo;
                this.queryParams.expendType = options.expendType;
                this.dialogVisible = true;
                this.getInfoList();
            },
            submitByDialog() {
                return {success: true}
            },
            /** 查询角色下拉树结构 */
            normalizer(node) {
                // console.log(node);
                delete node.children;
                return {
                    id: node.id,
                    label: node.name,
                    // children: node.children,
                };
            },
            load(row, treeNode, resolve) {
                let nextParams = {
                    pageNum: 1,
                    pageSize: 100,
                    haveNext: true,
                    parentId: row.id,
                };
                this.api.getList(nextParams).then((response) => {
                    resolve(response.data);
                });
            },

            // 表单重置
            reset() {
                this.form = {
                    parentId: 0,
                    name: undefined,
                    orderNum: 0,
                    img: undefined,
                    parentName: '顶级部门',
                };
                this.resetForm('form');
            },
       

            /** 新增按钮操作 */
            handleAdd(row) {
                this.reset();
                if (row != null && row.id) {
                    this.form.parentId = row.id;
                    this.form.parentName = row.name;
                } else {
                    this.form.parentId = 0;
                    this.form.parentName = '顶级部门';
                }
                this.title = '添加分类';
            },
            async triggerAddChildModify(parent) {
                var result = await mydialogplus({
                    title: "添加子级",
                    width: "800px",
                    data() {
                        return {
                            typeInfo: "bpm",
                            parentId: parent && parent.id,
                            parentName: parent && parent.name
                        }
                    },
                    components: {
                        modify: () => import("@/views/bnpmList/components/classModify.vue")
                    }
                })
            },
            async triggerClassModify(_data) {
                var result = await mydialogplus({
                    title: "修改分类",
                    width: "800px",
                    data() {
                        return {
                            ..._data,
                            typeInfo: "bpm"
                        }
                    },
                    components: {
                        modify: () => import("@/views/bnpmList/components/classModify.vue")
                    }
                })
                if (result && result.success) {
                    this.getInfoList();
                }
            }
        },
    };
</script>
